
<!--个人信息页面。要注意这个页面的路由设置，这个页面不在侧边导航栏出现，只能通过用户的下拉列表进入
    另外，页面右上角也没有使用用户头像，仅显示用户名。修改此处，应前往src/layout/components/Navbar.vue-->

<template>
  <div>
    <el-card style="width: 600px; height: 400px">
      <!--    展示个人信息-->
      <h1>
        个人信息
      </h1>
      <div class="info">
        <br>
        <span style="font-weight: bold">用户名：</span>
        <span>{{userName}}</span>
        <br><br>
        <span style="font-weight: bold">姓名：</span>
        <span>{{name}}</span>
        <br><br>
        <span style="font-weight: bold">角色：</span>
        <span>{{role}}</span>
        <br>

        <el-button type="primary" style=" margin-top: 40px" @click="openEditUI">修改密码</el-button>
      </div>

    </el-card>

<!--    修改密码弹窗-->
    <el-dialog :visible.sync="dialogFormVisible" title="修改密码" align-center @close="closeEditUI" style="width: 800px">
      <el-form :model="form">
        <el-form-item label="旧密码" label-width="100px">
          <el-input v-model="form.oldPwd" autocomplete="off" placeholder="请输入旧密码"/>
        </el-form-item>
        <el-form-item label="新密码" label-width="100px">
          <el-input v-model="form.newPwd" autocomplete="off" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认密码" label-width="100px">
          <el-input v-model="form.confirmPwd" autocomplete="off" placeholder="请确认新密码"/>
        </el-form-item>
      </el-form>

      <template #footer>
          <span  class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false" >
            确定
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>

    </el-dialog>

<!--    修改成功提示弹窗，弹窗的出现与否由showSuccess控制-->
    <el-dialog :visible.sync="showSuccess" style="width: 800px;">
      <h1>
        修改成功
      </h1>

      <template #footer>
          <span  class="dialog-footer">
          <el-button type="primary" @click="showSuccess = false" >确定</el-button>
        </span>
      </template>

    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "profile",
  data() {
    return{
      userName: '用户名',
      name: '姓名',
      role: '角色',

      dialogFormVisible: false,

      showSuccess: false,
      showFail: false,

      form: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: '',
      },
    }
  },
  methods: {
    openEditUI() {
      this.dialogFormVisible = true;
    },
    closeEditUI() {
      this.showSuccess = true;
      this.dialogFormVisible = false;
      this.form = {
        oldPwd: '',
        newPwd: '',
        confirmPwd: '',
      };
    },
  }
}
</script>

<style scoped>
  .info {
    margin-left: 80px;
    padding: 50px;
    padding-left: 80px;
    font-size: large;
  }
</style>
